import 'package:flutter/material.dart';

void main() {
  // 1.运行应用程序
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatelessWidget {
  const Main({super.key});
  static const List myList = [
    {
      'name': '张三',
      'age': 18,
      'color': Colors.red,
    },
    {
      'name': '李四',
      'age': 19,
      'color': Colors.yellow,
    },
    {
      'name': '王五',
      'age': 20,
      'color': Colors.green,
    },
    {
      'name': '赵六',
      'age': 21,
      'color': Colors.orange,
    },
    {
      'name': '钱七',
      'age': 22,
      'color': Colors.purple,
    },
    {
      'name': '孙八',
      'age': 23,
      'color': Colors.teal,
    },
  ];
  @override
  Widget build(BuildContext context) {
    // 2.构建应用程序界面
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '24-案例-渲染GridView列表',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.black,
      ),
      // 中间内容
      body: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.black12,
        child: GridView(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 一行显示几个
            mainAxisSpacing: 10, // 主轴间距
            crossAxisSpacing: 10, // 交叉轴间距
            childAspectRatio: 100 / 50, // 宽高比
          ),
          children: myList.map((item){
            // 同理：其他组件的children 也能通过map和tolist（）循环生成List<Widget>
            return Container(
              color: item['color'],
              alignment: Alignment.center,
              child: Text('${item['name']}今年${item['age']}岁'),
            );
          },
          ).toList(),
        ),
      ),
    );
  }
}
